<template>
    <div class="app-container">
        <router-link :to="'/example/create/'">
            <el-button type="primary" size="small" icon="el-icon-edit">新建会议</el-button>
        </router-link>

        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;margin-top:20px">
            <el-table-column label="编号" prop="id" sortable="custom" align="center" width="65">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="会议名称" min-width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="会议简介" width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="150px">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1">{{ "未开启"}}</span>
                    <span v-if="scope.row.status==2">{{ "进行中" }}</span>
                    <span v-if="scope.row.status==3">{{ "结束" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.addTime}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" align="center">
                <template slot-scope="scope">
                    <el-button @click="huiyilianjie" class="btn" :data-clipboard-text="scope.row.urls" type="primary" size="small">会议链接</el-button>
                    <router-link :to="'/example/edit/'+scope.row.id">
                        <el-button type="primary" size="small">查看详情</el-button>
                    </router-link>
                    <el-switch @change="onchange(scope.$index,scope.row)" v-if="scope.row.status==1" style="display: block;margin-top:5px" v-model="scope.row.value" active-color="#13ce66" inactive-color="#ff4949" active-text="开启会议">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />
    </div>
</template>

<script>
    import { fetchList, changeStatus } from '@/api/article';
    import ClipboardJS from 'clipboard';
    import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
    export default {
        components: { Pagination },
        filters: {
            statusFilter(status) {
                const statusMap = {
                    published: 'success',
                    draft: 'info',
                    deleted: 'danger'
                };
                return statusMap[status];
            }
        },
        data() {
            return {
                list: null,
                total: 0,
                listLoading: true,
                listQuery: {
                    name: '',
                    status: '',
                    pageSize: 10,
                    pageNo: 1
                },
                calendarTypeOptions: [
                    { key: '2', display_name: '进行中' },
                    { key: '1', display_name: '未开启' },
                    { key: '3', display_name: '结束' }
                ]
            };
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.listLoading = true;
                var indexs = '0';
                fetchList(this.listQuery).then(response => {
                    this.list = response.data.data.result;
                    this.total = response.data.data.totalCount;
                    this.listLoading = false;
                    this.list.map((value, index) => {
                        ++indexs;
                        value['value'] = indexs;
                        value['urls'] =
                            'http://main.zlsoft.net.cn/h5/index.html?meetId=' +
                            value.id+"&t=_"+new Date().getTime();
                    });
                });
                new ClipboardJS('.btn');
            },
            handleSizeChange(val) {
                this.listQuery.limit = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val;
                this.getList();
            },
            onchange(index, value) {
                var data = {
                    meetId: value.id,
                    type: value.status
                };
                changeStatus(data).then(res => {
                    if (res.data.code == 1) {
                        this.getList();
                        this.$message({
                            message: '开启成功',
                            type: 'success'
                        });
                    }
                });
            },
            huiyilianjie() {
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            }
        }
    };
</script>

<style scoped>
    .edit-input {
        padding-right: 100px;
    }
    .cancel-btn {
        position: absolute;
        right: 15px;
        top: 10px;
    }
</style>
